<template>
	<view class="comment">
		<view class="content">
			<view class="info"  v-for="(item,index) in productList" :key="index">
				<view class="top">
					<view class="info_name">
						<image class="goodimg" :src="item.product_picture" mode="aspectFill"></image>
						<text>{{item.product_name}}</text>
					</view>				
					<view class="item">
						<view class="name" v-for="(item,index2) in list" :key="index2" @click="setScores(index, index2)">
							<view :class="(index2 == 0 && evaluate[index].scores == 5) || (index2 == 1 && evaluate[index].scores == 3) || (index2 == 2 && evaluate[index].scores == 1)?'sel':'nosel'"></view>
							<image :src="(index2 == 0 && evaluate[index].scores == 5) || (index2 == 1 && evaluate[index].scores == 3) || (index2 == 2 && evaluate[index].scores == 1)
								? 'https://hdsq.aoorange.cn/attachment/xcx/icon/mal'+index2+'.png'
								: 'https://hdsq.aoorange.cn/attachment/xcx/icon/normal'+index2+'.png'"
							 mode="aspectFill"></image>
						</view>
					</view>
				</view>
                <textarea value="" v-model="evaluate[index].content"  placeholder="输入您对商品评价" />
				<view class="photos">
					<view class="photo_list" v-for="(item2,index2) in imgList[index]" :key="index2">
					   <image :src="item2.imgUrl" mode="aspectFill"></image>
					   <image @click="delImg(index, index2)" src="../../static/img/del-new.png" class="del" mode="aspectFill"></image>
					</view>
					<image src="../../static/img/add_icon.png" mode="aspectFill" @click="chooseImage(index)"></image>
				</view>
			</view>
		</view>
		<view :style="'height:' + bottomHeight + 'rpx;'" class="bottom" @click="subEvaluate()">提交评价</view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	export default {
		data() {
			return {
				list: [{
					ischeck: true,
					text:"好评"
				}, {
					ischeck: false,
					text:"中评"
				}, {
					ischeck: false,
					text:"差评"
				}],
				ischeck:false,
				id : 0,
				productList : {},
				evaluate: [],
				imgList: [],
				bottomHeight: 110,/* 底部按钮高度，避免iPhonex导航黑条 */
			}
		},
		methods: {
			getInfo() {
				var self = this;
				serve.request({
					url: '/member/order/view',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token'),
						id: self.id
					}
				}).then(res => {
					if(res.code != 200) {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									uni.navigateBack({
									    delta: 1
									});
								}, 2000) 
							}
						});
					}
					self.productList = res.data.product_list;
					console.info(self.productList);
					self.productList.forEach((item, key) => {
						self.evaluate[key] = {
							'order_product_id':item.id,
							'scores' : 5,
							'content' : '',
						};
						self.imgList[key] = [];
					});
				});
			},
			setScores(itemId, scoresKey) {
				let scores = scoresKey == 0 ? 5 : (scoresKey == 1 ? 3 : 1);
				this.evaluate[itemId].scores = scores;
				this.$forceUpdate();
			},
			setAnonymous() {
				this.ischeck = this.ischeck ? false : true;
			},
			subEvaluate() {
				uni.showLoading({
					title: '提交中···',
					mask: true
				});
				var self = this;
				let evaluate = '[';
				let is_anonymous = self.ischeck ? 1 : 0;
				self.evaluate.forEach((item, key) => {
					let imgStr = '';
					if(self.imgList[key].length > 0) {
						let imgAll = self.imgList[key];
						imgAll.forEach((imgItem, key2) => {
							imgStr += imgItem.imgPath + ';';
						})
					}
					evaluate += (key > 0 ? ',' : '')+'{"order_product_id":'+item.order_product_id+',"scores":'+item.scores+',"content":"'+item.content+'","is_anonymous":'+is_anonymous+',"imgStr":"'+imgStr+'"}';
				});
				evaluate += ']';
				serve
					.request({
						url: '/member/evaluate/create',
						data: {
							appkey: uni.getStorageSync('appkey'),
							'access-token': uni.getStorageSync('access-token'),
							evaluate: evaluate
						}
					})
					.then(res => {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success:function(){
								setTimeout(function () {
									if(res.code == 200) {
										uni.navigateBack({
										    delta: 1
										});
									}
								}, 2000) 
							}
						});
					});
			},
			chooseImage(key){
				var self = this;
				let nowImgList = self.imgList[key];
				if (nowImgList.length >= 9) {
					return ;
				}
				uni.chooseImage({
					sizeType: ['compressed'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						if((Number(tempFilePaths.length) + Number(nowImgList.length)) > 9) {
							uni.showToast({
								title: "最多能上传9张，还能上传"+(9 - Number(nowImgList.length))+"张",
								icon: 'none',
							});
							return ;
						}
						uni.showLoading({
							title: '上传中···',
							mask: true
						});
						tempFilePaths.forEach((imgPath, k) => {
							self.uploadImg(imgPath, key);
						});
					}
				});
			},
			uploadImg(imgPath, key) {
				var self = this;
				uni.uploadFile({
					url: serve.apiUrl()+'/v1/file/images?appkey='+ uni.getStorageSync('appkey'), 
					filePath: imgPath,
					name: 'file',
					formData: {
						'access-token': uni.getStorageSync('access-token'),
					},
					success: (uploadFileRes) => {
						let result = JSON.parse(uploadFileRes.data);
						if(result.code == 200) {
							let imgArr = [{}];
							self.$set(imgArr[0], 'imgUrl', result.data.imgUrl);
							self.$set(imgArr[0], 'imgPath', result.data.imgPath);
							self.imgList[key] = self.imgList[key].concat(imgArr);
							console.info(self.imgList);
							self.$forceUpdate();
						} else {
							uni.showToast({
								title: result.message,
								icon: 'none',
							})
						}
						uni.hideLoading();
					}
				});
			},
			delImg(key, key1) {
				this.imgList[key].splice(key1,1);
				this.$forceUpdate();
			},
			jump(jump_type, jump_link){
				if(jump_type == 'order_cancel' || jump_type == 'order_pay' || jump_type == 'take_delivery') {
					this.operate(jump_type, jump_link);
					return ;
				} 
				common.jump(jump_type, jump_link);
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 150;
			}
			this.id=options.id || 12;
			if(this.id == 0) {
				uni.showToast({
					title: "错误的访问方式",
					icon: 'none',
					success() {
						setTimeout(function () {
							this.jump('my_order_list')
						}, 2000) 
					}
				});
			}
			this.getInfo();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function() {
				uni.stopPullDownRefresh(); //结束下拉加载状态
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.comment {
		padding-bottom: 100rpx;
		.info {
			box-sizing: border-box;
			padding: 40rpx 30rpx 0rpx;
			textarea{
				margin-top: 40rpx;
				box-shadow: box-sizing;
				padding: 33rpx 39rpx;
				height:176rpx;
				background:#F7F7F7;
				border-radius:12px;
			}
			.top {
				display: flex;
				flex-direction: column;
				.info_name{
					display: flex;
					align-items: center;
					color: #333333;
					font-size: 38rpx;
					.goodimg {
						width: 80rpx;
						height: 80rpx;
						margin-right: 26rpx;
					}
				}			

				.item {
					display: flex;
					align-items: center;
					margin-top: 40rpx;
				    margin-left: -43rpx;
					.name {
						display: flex;
						align-items: center;
						margin-left: 43rpx;
						font-size: 28rpx;
						color: #999999;
						.sel {
							background-image: url(https://hdsq.aoorange.cn/attachment/xcx/icon/xuanzhong.png);
							background-repeat: no-repeat;
							width: 40rpx;
							height: 40rpx;
							background-size: 100%;
						}
				
						.nosel {
							width: 36rpx;
							height: 36rpx;
							border: 1rpx solid #CCCCCC;
							border-radius: 50%;
						}
						.check{
							color: #EB5938;
						}
				
						image {
							width:120rpx;
							height:39rpx;
							margin-left: 16rpx;
							margin-right: 14rpx;
						}
					}
				}
			}

		}
		.photos{
			box-sizing: border-box;
			padding: 30rpx 0rpx;
			display: flex;
			flex-wrap: wrap;
			image{
				width:200rpx;
				height:200rpx;
				border-radius:10rpx;
				margin-bottom: 20rpx;
			}
			.photo_list{
				margin-right: 28rpx;
				padding-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				position: relative;
				view{
					color: red;
					font-size: 30rpx;
				}
				.del{
					width: 48rpx !important;
					position: absolute;
					height: 48rpx !important;
					top: -24rpx;
					right: -24rpx;
				}
			}
		}
		.bottom {
			width: 100%;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 32rpx;
			color: rgba(255, 255, 255, 1);
			background: #FFBC00;
			bottom: 0rpx;
			position: fixed;
		}
	}
</style>
